<template>
  <div>
    <div class="myform">
      <div class="center">
        <div class="register">
          <h2>会员注册</h2>
          <div>
            我已有账号，<router-link to="/main/login" style="color: #a56224"
              >我要登录</router-link
            >
            ，您可以使用合作网站账号登录。
            <img
              style="margin-left: 400px"
              src="../assets/image/login_wei.jpg"
              alt=""
            />
            | <img src="../assets/image/login_qq.jpg" alt="" /> |
            <img src="../assets/image/login_zhi.jpg" alt="" />
          </div>
          <div style="margin-top: 20px; margin-bottom: 20px">
            提示:尊敬的顾客，如果您曾经通过手机拨打过4008-557-667热线订购黑池产品，您可以使用网站的
            “找回密码”功能找回密码，并使用手机号码登录。
          </div>
          <div class="regform">
            <div>
              <span style="margin-right: 12px">用户名：</span>
              <input
                type="text"
                v-model="uname"
                placeholder="请输入用户名"
                @blur="checkUname"
              />
              <i :class="unamestate"></i>
              <span>*建议使用手机号注册</span>
            </div>
            <div>
              <span style="margin-right: 25px">密码：</span
              ><input
                type="password"
                v-model="upwd"
                @blur="checkUpwd"
                placeholder="请输入密码"
              /><i :class="upwdstate"></i>
              <span>*字母或数字</span>
            </div>
            <div>
              <span>确认密码：</span>
              <input
                type="password"
                v-model="reupwd"
                placeholder="请再次确认密码"
                @blur="checkReupwd"
              />
              <i :class="reupwdstate"></i>
              <span>*</span>
            </div>
            <div>
              <span style="margin-right: 25px">手机：</span>
              <input
                type="text"
                v-model="phone"
                placeholder="请输入手机号"
                @blur="checkPhone"
              />
              <i :class="phonestate"></i>
              <span>*</span>
            </div>
            <div>
              <span style="margin-right: 10px">会员类型：</span>
              <select>
                <option>个人</option>
                <option>公司</option>
              </select>
              <span style="margin-left: 5px; color: red"
                >(公司会员不参与会员积分活动)</span
              >
            </div>
            <div>
              <span style="margin-right: 25px">姓名：</span>
              <input type="text" v-model="chname" placeholder="请输入姓名" @blur="checkChname"/>
              <i :class="chnamestate"></i>
              <span>*</span>
            </div>
            <button @click="checkForm">注册会员</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      unamestate: "",
      upwd: "",
      upwdstate: "",
      reupwd: "",
      reupwdstate: "",
      phone: "",
      phonestate: "",
      chname: "",
      chnamestate: "",
    };
  },
  methods: {
    checkUname() {
      let reg = /^\w{6,12}$/;
      if (reg.test(this.uname)) {
        this.unamestate = "el-icon-success";
        return true;
      } else {
        this.unamestate = "el-icon-error";
        return false;
      }
    },
    checkUpwd() {
      let reg = /^\w{6,12}$/;
      if (reg.test(this.upwd)) {
        this.upwdstate = "el-icon-success";
        return true;
      } else {
        this.upwdstate = "el-icon-error";
        return false;
      }
    },
    checkReupwd() {
      let reg = /^\w{6,12}$/;
      if (reg.test(this.reupwd) && this.reupwd == this.upwd) {
        this.reupwdstate = "el-icon-success";
        return true;
      } else {
        this.reupwdstate = "el-icon-error";
        return false;
      }
    },
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.phonestate = "el-icon-success";
        return true;
      } else {
        this.phonestate = "el-icon-error";
        return false;
      }
    },
    checkChname() {
      let reg = /^[\u4e00-\u9fa5]{2,8}$/;
      if (reg.test(this.chname)) {
        this.chnamestate = "el-icon-success";
        return true;
      } else {
        this.chnamestate = "el-icon-error";
        return false;
      }
    },
    checkForm(){
      if(this.checkUname() && this.checkUpwd() && this.checkReupwd() && this.checkPhone() && this.checkChname()){
        console.log("验证成功，执行注册操作");
        let url="/mp/reg"
        let  params=`uname=${this.uname}&upwd=${this.upwd}&chname=${this.chname}`
        this.axios
        .post(url,params)
        .then((res) => {
          console.log(res);
          alert("注册成功，即将跳转到登陆页面")
          this.$router.push("/main/login")
        })
        .catch((err) => {
          
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.myform {
  margin-top: 40px;
  .center {
    border: 1px solid blanchedalmond;
    background-color: #f3f0ed;
    width: 50%;
    margin: auto;
    .register {
      padding: 10px;
      color: #543018;
      div {
        font-size: 13px;
      }
      .regform {
        width: 55%;
        margin: auto;
        transform: translateX(15%);
        i {
          color: rgba(255, 72, 0, 0.808);
          margin-right: 2px;
          font-size: 20px;
        }
        button {
          border-radius: 5px;
          background-color: #543018;
          margin-left: 130px;
          color: white;
          padding: 5px;
          width: 80px;
        }
      }
      h2 {
        text-align: center;
        color: #a56224;
      }
    }
  }
  input {
    width: 180px;
    padding: 5px;
    margin: 10px 10px;
  }
}
</style>